Nested Lists and Tables:

1. Nested Lists

A nested list means putting one list inside another list. It helps in creating sub-points under a main point. We can use both ordered (<ol>) and unordered (<ul>) lists.

Example of Nested List:

<ul>
   <li>Fruits
       <ul>
           <li>Apple</li>
           <li>Banana</li>
           <li>Mango</li>
       </ul>
   </li>
   <li>Vegetables
       <ul>
           <li>Carrot</li>
           <li>Potato</li>
       </ul>
   </li>
</ul>
    

Output:

• Fruits
  • Apple
  • Banana
  • Mango
• Vegetables
  • Carrot
  • Potato

2. Tables

A table in HTML is used to display data in rows and columns. The main tags are:

• <table> → Creates a table
• <tr> → Table row
• <th> → Table header (bold text)
• <td> → Table data (normal cell)

Example: Simple Table with Border

<table border="1">
   <tr>
       <th>Name</th>
       <th>Age</th>
   </tr>
   <tr>
       <td>Payal</td>
       <td>22</td>
   </tr>
   <tr>
       <td>Simran</td>
       <td>20</td>
   </tr>
</table>
    

Output:

Rowspan and Colspan in Tables

- rowspan → Merge cells vertically (rows)
- colspan → Merge cells horizontally (columns)

Example with Rowspan & Colspan:

<table border="1">
   <tr>
       <th rowspan="2">Name</th>
       <th colspan="2">Marks</th>
   </tr>
   <tr>
       <th>Maths</th>
       <th>Science</th>
   </tr>
   <tr>
       <td>Payal</td>
       <td>90</td>
       <td>85</td>
   </tr>
   <tr>
       <td>Simran</td>
       <td>88</td>
       <td>92</td>
   </tr>
</table>
    

Output:

🏠 Homepage | ⬅ Previous Lecture | ➡ Next Lecture